<template>
  <v-main class="full-height">
    <v-app-bar
        flat
        fixed
        align="center"
        height="60px"
    >
      <v-container>
        <v-row justify="center" class="py-0">
          <v-col cols="3" class="text-left pl-0">
            <v-btn icon @click="$router.back()" class="ml-n3" >
              <v-icon color="lighten-1" >mdi-arrow-left</v-icon>
            </v-btn>
          </v-col>
          <v-col cols="6">
            <div class="mt-3">
              消息详情
            </div>
          </v-col>
          <v-col cols="3" class="text-right pr-0">
          </v-col>
        </v-row>
      </v-container>
    </v-app-bar>

    <v-container class="mt-15">
      <!--      头像-->
      <v-row justify="space-around" no-gutters>
        <v-col cols="3" class="text-center">
          <v-avatar size="60" @click="$router.push('/userInfo/'+fromUser.uid)">
            <v-img :src="getImg(fromUser.avatar)"></v-img>
          </v-avatar>
        </v-col>
        <v-col cols="9">
          <v-row class="pt-2">
            <v-col cols="12" class="pb-0 pt-1">
              <span class="text-subtitle-1 text-truncate">{{fromUser.nickname}}</span>
            </v-col>
            <v-col cols="12" class="text-caption py-0">
              {{fromUser.description}}
            </v-col>
          </v-row>
        </v-col>
      </v-row>
      <!--      内容-->
      <v-row>
        <v-col v-html="preProcessContent(message.content)" style="text-align: justify">

        </v-col>
      </v-row>
      <v-divider class="my-2"></v-divider>
      <!--      时间-->
      <v-row>
        <v-col cols="12">
          <div class="text-caption text-right">{{myDateFormat(message.createTime)}}</div>
        </v-col>
      </v-row>
    </v-container>

<!--    &lt;!&ndash;    展示大图&ndash;&gt;-->
<!--    <show-big-image :show="imgOverlay" @dismiss="imgOverlay=false" :src="imgSrc"></show-big-image>-->
  </v-main>
</template>

<script>
import ShowBigImage from "../components/ShowBigImage";
import {baseUrl, imgPrefixUrl} from "../myConfig";
import {printMsg, myDateFormat, getImg,b64_to_utf8} from "../util/util";
export default {
  name: "Message",
  components:{ShowBigImage},
  data:()=>({
    imgOverlay: false,
    imgSrc:'',
    mid:'',
    message:{
      title:'',
      content:'',
      createTime:'',
      readStatus:0,
    },
    fromUser:{}
  }),
  methods:{
    getImg,
    myDateFormat,
    showImage(src,raw=false){
      if (!raw){
        src = baseUrl+imgPrefixUrl+src;
      }
      this.imgSrc = src;
      this.imgOverlay=true;
    },
    preProcessContent(str){
      let reg = /<a href="(.*?)".*?>(.*?)<\/a>/
      let res = reg.exec(str)
      if (res){
        printMsg(reg.exec(str),this)
        str = str.replace(res[0],`<a href="${res[1]}">${res[2]}</a>`)
        printMsg(str,this)
      }
      return str
    },
    loadMessage(){
      let data = {
        mid:this.mid,
      }
      this.$http.post('message/listMessages',data).then(res => {
        this.message = res.data[0]
        this.message.content = b64_to_utf8(this.message.content)
        this.getUserInfo(this.message.fromUid)
        // 未读 发送已读状态
        if (this.message.readStatus === 1){
          let data2 = {
            midList:[this.mid],
            receiverUid:this.$store.state.uid
          }
          this.$http.post('message/readMessage',data2).then(res => {
          }).catch(res => {
            this.$emit("toast", res.msg)
          })
        }
      }).catch(res => {
        this.$emit("toast", res.msg)
      })

    },
    getUserInfo(uid){
      let data = {
        uid : uid
      }
      this.$http.post('user/getUser',data).then(res=>{
        let result = res.data[0]
        this.fromUser = result
      }).catch(res=>{
        this.$emit('toast',res.msg)
      })
    }
  },
  beforeMount() {
    this.mid = this.$route.params.mid
    this.loadMessage()
  }
}
</script>

<style scoped>

</style>
